<!--
 * @Author: 陆成杰
 * @Date: 2022-06-23 14:25:08
 * @LastEditTime: 2022-07-03 14:25:03
 * @LastEditors: 陆成杰
 * @FilePath: /boe/src/views/plan-manager/PlanExamin.vue
 * Copyright (c) ${now_year} by zucc-陆成杰, All Rights Reserved. 
-->
<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-row>
          <el-col :span="1.5" style="margin-top:7px;margin-left: 60px;" class="acc">计划名称：</el-col>
          <el-col :span="4" class="in">
            <el-input v-model="input" placeholder="请输入计划名称"></el-input>
          </el-col>
          <el-button style="padding: 3px 0;width: 80px;position: absolute;right: 100px;" type="white">重置</el-button>
          <el-button style="padding: 3px 0;width: 80px;position: absolute;right: 5px;" type="primary">查询</el-button>
        </el-row>
      </div>

    </el-card>
      <!-- table -->
      <el-table
        :data="tableData"
        style="width: 100%; font-size: 12px; margin-top:10px;"
        stripe
        :header-cell-style="{ background: 'rgb(35, 39, 56)', fontSize:'14px',color: '#fff' }"
        :cell-style="{cellStyle, background: 'rgb(41, 45, 62)', color: '#fff', fontSize:'14px'}"
      >
        <el-table-column
          width="70"
          prop="order"
          label="序号"
        ></el-table-column>
        <el-table-column
          width="100"
          prop="pic"
          label="缩略图"
          key="slot"
        >
          <template #default="scope">
            <el-avatar shape="square" :size="50" fit="fill" :src="scope.row.pic"></el-avatar>
          </template>
        </el-table-column>
        <el-table-column
          width="180"
          prop="plan"
          label="计划名称"
        ></el-table-column>
        <el-table-column
          width="160"
          prop="number"
          label="使用设备数"
        ></el-table-column>
        <el-table-column
          prop="author"
          label="作者"
        ></el-table-column>
        <el-table-column
          width="240"
          prop="time"
          label="更新时间"
        ></el-table-column>
        <el-table-column
          width="200"
          prop="operation"
          label="操作">

          <template #default="scope">
            <el-button type="text" size="middle" @click="checkPlan(scope.$index, scope.row)">预览</el-button>
          </template>

        </el-table-column>
      </el-table>

      <el-dialog :visible.sync="dialogPreVisible" v-model="dialogPreVisible" width="70%">
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
          <el-tab-pane label="计划详情" name="first">
            <el-descriptions :column="2">
              <el-descriptions-item label="计划名称：">{{this.plandetail.name}}</el-descriptions-item>
              <el-descriptions-item label="播放日期：">{{this.plandetail.date}}</el-descriptions-item>
              <el-descriptions-item label="播放模式：">{{this.plandetail.mode}}</el-descriptions-item>
              <el-descriptions-item label="发布状态：">{{this.plandetail.state}}</el-descriptions-item>
              <el-descriptions-item label="创建时间：">{{this.plandetail.createtime}}</el-descriptions-item>
              <el-descriptions-item label="播放时段：">{{this.plandetail.startTime}}-{{this.plandetail.endTime}}</el-descriptions-item>
              <el-descriptions-item label="已选节目：">
                <el-image 
                  style="width: 200px; height: 300px"
                  :src="this.plandetail.url"
                  :preview-src-list="this.plandetail.srcList" >
                </el-image>
              </el-descriptions-item>
            </el-descriptions>
          </el-tab-pane>
          <el-tab-pane label="设备详情" name="second">
            <el-descriptions direction="vertical" :column="6" border style="margin-bottom:20px">
              <el-descriptions-item label="设备名称">{{this.devicedetail.name}}</el-descriptions-item>
              <el-descriptions-item label="MAC地址">{{this.devicedetail.mac}}</el-descriptions-item>
              <el-descriptions-item label="分辨率" >{{this.devicedetail.ratio}}</el-descriptions-item>
              <el-descriptions-item label="所属机构" >{{this.devicedetail.organization}}</el-descriptions-item>
              <el-descriptions-item label="当前计划" >{{this.devicedetail.plan}}</el-descriptions-item>
              <el-descriptions-item label="设备状态" >{{this.devicedetail.state}}</el-descriptions-item>
            </el-descriptions>
          </el-tab-pane>
        </el-tabs>
        <span slot="footer" class="dialog-footer" style="position: absolute;right: 10px;bottom: 5px;">
          <el-button @click="dialogPreVisible = false">取 消</el-button>
        </span>
      </el-dialog>

    <!-- </el-card> -->
  </div>
</template>

<script>
import { getPlanList, getPlanDetail } from "../../axios/plan";
import { infoMechanism, getMechanism } from "../../axios/device";
import { request } from '../../axios/request';
import moment from "moment";
export default {
  data() {
    return {
      input:'',
      selectstate:'',
      plandetail:
      {
        name:'',
        mode:'',
        createtime:'',
        date:'',
        state:'',
        startTime:'',
        endTime:'',
        url:'',
        srcList:[]
        // url:'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
      },
      devicedetail:{
        name:'',
        mac:'',
        ratio:'1920x1080',
        organization:'',
        plan:'--',
        state:'',
      },
      tableData: [
        // {
        //   order:'1',
        //   pic:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
        //   plan:'11111',
        //   number:'1个',
        //   author:'luolaoshi',
        //   time:'	2022-06-26 14:57:08',
        // },
      ],
      dialogPreVisible:false,
      activeName: 'first',
    };
  },
  created(){
    this.getPlanApi()
  },
  methods: {
    //搜索
    searchId() {},
    handleClick(row) {
      console.log(row);
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    checkPlan(index,row){
      this.dialogPreVisible = true
      console.log(222)
      console.log(row)
      getPlanDetail(row.order).then(request=>{
          console.log(request.data.plan)
          this.plandetail.name=request.data.plan.Name,
          this.plandetail.mode=request.data.plan.Mode,
          this.plandetail.createtime=request.data.plan.CreatedAt,
          this.plandetail.createtime = moment(this.plandetail.createtime).format("YYYY-MM-DD HH:mm:ss")
          this.plandetail.date=request.data.plan.StartDate,
          this.plandetail.state=request.data.plan.State,
          this.plandetail.startTime=request.data.plan.PlayPeriods[0].StartTime
          this.plandetail.endTime=request.data.plan.PlayPeriods[0].EndTime
          console.log("tupian")
          const html=JSON.parse(request.data.plan.PlayPeriods[0].Shows[0].Images)
          this.plandetail.srcList=html
          this.plandetail.url=html[0]
          console.log(html)
          
          // console.log(JSON.parse(html))
          // const length=request.data.plan.PlayPeriods[0].Shows[0].Images.length-2
          // const image=request.data.plan.PlayPeriods[0].Shows[0].Images.substring(2,length)
          // console.log(image)
      })
      
      getMechanism("0","100").then(request=>{
        console.log(request.data.devices)
        console.log('设备'),
        this.devicedetail.name=request.data.devices[3].Name,
        this.devicedetail.mac=request.data.devices[3].Mac,
        this.devicedetail.organization=request.data.devices[3].OrganizationID,
        this.devicedetail.state=request.data.devices[3].State,
        console.log(this.devicedetail)

      })
    },
    getPlanApi(){
      getPlanList(0,100).then(request =>{
        console.log(request.data.plans)
        let data=request.data.plans
        data.forEach(element => {
          this.tableData.push(
            {
              pic:element.Preview,
              order:element.ID,
              plan:element.Name,
              author:element.UserID,
              time:element.UpdatedAt
            }
          )
        });
        for (let i = 0; i < this.tableData.length; i++) {
          // console.log(state.tableData[i].UpdatedAt);
          this.tableData[i].time = moment(
            this.tableData[i].time
          ).format("YYYY-MM-DD HH:mm:ss");
        }
        this.totalCount=request.data.plans.length
        console.log(this.totalCount)
      })
    }
  }
};
</script>

<style lang="less" scoped>
.el-card{
  background-color: rgb(41, 45, 62);
  border: 0px;
}
.box-card{
  .acc{
    color: white;
  }
  .in{
    background-color: white;
    display: flex;
    border-radius: 5px;
    input{
      background-color: rgb(35, 39, 56);
      height: 30px;
      width: 120px;
      border:0px;
      margin-right: 3px;
    }
  }
}
</style>